
<template>
  <div class="home">
    <div class="banner wrap">
      <img src="../assets/img/首页横幅.png" alt="" />
    </div>
    <div class="content">
      <div class="wrap">
        <jlxTitle title1="精品推荐" :imgSrc="titImg1"></jlxTitle>
        <List
          :arr="JSON.parse(JSON.stringify(goodsArr[0].jingpinArr))"
          maxLength="4"
        ></List>
        <jlxTitle title1="热门兑换" :imgSrc="titImg2"></jlxTitle>
        <List
          :arr="JSON.parse(JSON.stringify(goodsArr[1].remenArr))"
          maxLength="6"
        ></List>
      </div>
    </div>
    <div class="wrap">
      <jlxTitle title1="金币攻略" :imgSrc="titImg3"></jlxTitle>
      <ul class="jinbi">
        <li :style="{ backgroundImage: `url(${jinbiImg1})` }">
          <h3>签到得金币</h3>
          <div>去签到</div>
        </li>
        <li :style="{ backgroundImage: `url(${jinbiImg2})` }">
          <h3>推荐得金币</h3>
          <div>去推荐</div>
        </li>
        <li :style="{ backgroundImage: `url(${jinbiImg3})` }">
          <h3>做任务得金币</h3>
          <div>做任务</div>
        </li>
      </ul>
    </div>
  </div>
</template>
  
  <script>
import jlxTitle from "@/components/home/jlxTitle";
import List from "@/components/home/List";
export default {
  name: "Home",
  components: { jlxTitle, List },
  data() {
    return {
      titImg1: require("../assets/img/拇指.png"),
      titImg2: require("../assets/img/火苗.png"),
      titImg3: require("../assets/img/金币.png"),
      jinbiImg1: require("../assets/img/宝箱.png"),
      jinbiImg2: require("../assets/img/推荐.png"),
      jinbiImg3: require("../assets/img/任务.png"),
      // arr:[{},{}]
      goodsArr: [
        {
          jingpinArr: [
            {
              id: 1,
              Img:"https://gw.alicdn.com/bao/uploaded/i3/2207863144496/O1CN01M2i05R1j5DV1x2pan_!!2207863144496.jpg_Q75.jpg_.webp",
              smallImg:[
                  "https://img.alicdn.com/imgextra/i3/2207863144496/O1CN01piMNwK1j5DVZJu9LK_!!2207863144496.png",
                  "https://img.alicdn.com/imgextra/i3/2207863144496/O1CN01piMNwK1j5DVZJu9LK_!!2207863144496.png",
                  "https://img.alicdn.com/imgextra/i3/2207863144496/O1CN01piMNwK1j5DVZJu9LK_!!2207863144496.png",
                  "https://img.alicdn.com/imgextra/i3/2207863144496/O1CN01piMNwK1j5DVZJu9LK_!!2207863144496.png",
                  "https://img.alicdn.com/imgextra/i3/2207863144496/O1CN01piMNwK1j5DVZJu9LK_!!2207863144496.png",
              ],
              name: "短袖",
              coin: "20",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "BALENCIAGA巴黎世家BALENCIAGA / adidas 男士宽松短袖T恤",
            },
            {
              id: 2,
              Img: "https://img.alicdn.com/imgextra/i2/4066234693/O1CN01vCpXtb1kXRW3EOuUq_!!4066234693.jpg_430x430q90.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "手提包",
              coin: "50",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle: "香港直邮潮奢 Coach 男士徽标手提包",
            },
            {
              id: 3,
              Img: "https://gd2.alicdn.com/imgextra/i2/2214144810457/O1CN01GoWy8y1FFLmfVZmR9_!!2214144810457.jpg_400x400.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "皮带",
              coin: "30",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "Gucci古驰皮带经典双G黑色压花古奇腰带男女休闲商务真皮腰链",
            },
            {
              id: 4,
              Img: "https://img.alicdn.com/imgextra/i1/2200657724895/O1CN01Auboto1m1xWmlwL6R_!!2200657724895.jpg_430x430q90.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "剃须刀",
              coin: "100",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "博朗往复式电动剃须刀新9系Pro男士刮胡刀9557CC同款进口",
            },
          ],
        },
        {
          remenArr: [
            {
              id: 5,
              Img: "https://img13.360buyimg.com/n1/s450x450_jfs/t1/179895/10/30383/81809/636e7e3bE8e1843bb/c3bd8e559a21fe79.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "笔记本",
              coin: "8000",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "联想拯救者Y7000P 2022 英特尔酷睿i5 15.6英寸游戏笔记本电脑(12代i5-12500H 16G 512G RTX3050 2.5k电竞屏)",
            },
            {
              id: 6,
              Img: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/64043/23/19871/262025/62c50258E84d7996b/159481bb66fa5ed8.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "键盘",
              coin: "500",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "达尔优(dareu)A87pro无线三模客制化游戏机械键盘可插拔轴gasket结构PBT键帽87键RGB背光天空轴V3-天空版",
            },
            {
              id: 7,
              Img: "https://img11.360buyimg.com/n1/s450x450_jfs/t1/64858/23/17025/163740/613729bfE5c9c75dd/1e79132378a2d475.jpg",
              smallImg:[
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/168290/28/4879/249418/601518b6Eb7350473/dc8c9597a09d84d0.jpg",
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/165589/22/4411/258236/601518b6E868051d3/0f947799e24dbf66.jpg",
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/139888/2/10548/128575/5f855a5dE56cca385/0b2246717d9f079a.jpg",
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/150142/2/10554/85330/5f855a5eE9b217e45/ae0cf287f89abc63.jpg"

              ],
              sku:['黑色','白色','海克斯限定'],
              name: "鼠标",
              coin: "200",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "罗技(G) G502 HERO主宰者 游戏鼠标 有线鼠标 电竞机械 吃鸡大手 男生 【鼠标+GHUB套装】G502 HERO",
            },
            {
              id: 8,
              Img: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/181202/40/28316/79621/6305e8c0Ea0133f5e/68bb224d65aa640d.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "充电宝",
              coin: "90",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "品胜 22.5W超级快充20000mAh双向快充电宝便携大容量PD20W移动电源三入三出Type-C",
            },
            {
              id: 9,
              Img: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/79746/10/9006/115281/5d6dbe17E7e96eeb0/5ae0b4962dc172b1.jpg",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "U盘",
              coin: "30",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "闪迪 (SanDisk) 128GB USB3.0 U盘CZ73酷铄 小巧便携 安全加密 学习办公 大容量优盘",
            },
            {
              id: 10,
              Img: "https://img10.360buyimg.com/n1/jfs/t1/112751/22/7527/246936/5ec3f8a1Eb9ea1cad/f96c1b8324fce91d.png",
              smallImg:[
                {
                  1:"",
                  2:"",
                  3:"",
                  4:""
                }
              ],
              name: "电脑支架",
              coin: "50",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "诺西 N8笔记本支架 N3电脑支架桌面增高托架两层铝合金散热器折叠便携式支撑底座手提颈椎升降悬空架子",
            },
          ],
        },
      ],
    };
  },
};
</script>
  
  <style lang="less" scoped>
.banner {
  padding-bottom: 30px;
  img {
    width: 1200px;
  }
}
.content {
  background-color: #f5f5f5;
  padding-bottom: 30px;
}
.jinbi {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  li {
    width: 285px;
    height: 168px;
    color: #fff;
    padding: 20px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-size 0.4s linear;
    background-size: 100% 100%;
    &:hover {
      background-size: 105% 105%;
    }
    h3 {
      font-size: 24px;
      margin-bottom: 19px;
    }
    div {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 27px;
    }
  }
}
</style>
  
  
  